<template>
    <page-box class="page">
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
            <page-search>
                <page-search-column class="tab-column">
                    <page-search-item>
                        <el-dropdown trigger="click" @command="handleBatchClick">
                            <el-button
                                class="pbb__search-btn">
                                批量操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item
                                    icon="el-icon-delete-solid"
                                    command="remove"
                                    :disabled="batchList.length === 0 || !canBatch.remove">
                                    批量删除
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </page-search-item>
                    <page-search-item class="right">
                        <el-button
                            class="pbb__search-btn"
                            type="primary"
                            @click="handleItem({})"
                            icon="el-icon-plus">
                            添加职位
                        </el-button>
                    </page-search-item>
                </page-search-column>
            </page-search>
        </template>
        <ask-empty-text
            style="min-height: 400px;"
            v-if="tableData.length === 0">
        </ask-empty-text>
        <el-table
            v-show="tableData.length !== 0"
            :key="$route.name"
            class="pbb__table"
            header-cell-class-name="pbb__table-thead"
            cell-class-name="pbb__table-thead-cell"
            row-class-name="pbb__table-thead-row"
            :data="tableData"
            @selection-change="onTableSelectionChange"
            style="width: 100%">
            <el-table-column
                type="selection"
                header-align="center"
                align="center"
                width="60"
            ></el-table-column>
            <el-table-column
                label="序号"
                align="center"
                type="index"
                width="60">
            </el-table-column>
            <el-table-column
                v-for="(item,key) in tableColumn"
                :key="key"
                :prop="item.prop"
                :label="item.label"
                :width="item.width||'-'"
                :min-width="item.minWidth||'-'"
                align="center"
                show-overflow-tooltip
                >
                <template slot-scope="scope">
                    <template v-if="item.prop === 'status' && scope.row[item.prop] !== ''">
                        <div>
                            <el-tag
                                :type="scope.row[item.prop].type"
                                size="small">
                                {{scope.row[item.prop].label}}
                            </el-tag>
                        </div>
                        <!-- <template v-if="scope.row[item.prop].name === 'REVIEWFAIL'">
                            {{scope.row.opinion}}
                        </template> -->
                    </template>
                    <template v-else>
                        {{scope.row[item.prop]||'-'}}
                    </template>
                </template>
            </el-table-column>
            <el-table-column
                header-align="center"
                align="center"
                width="240"
                label="操作"
                class-name="option-column">
                <template slot-scope="scope">
                    <el-button
                        @click="handleItem(scope.row)"
                        type="text"
                        size="small">
                        编辑
                    </el-button>
                    <el-button
                        @click="remove(scope.row)"
                        type="text"
                        size="small">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <template v-slot:footer v-if="pageCount > 0">
            <el-pagination
                class="pbb__pagination"
                @size-change="onPageSizeChange"
                @current-change="onCurrentPageChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageCount"
            >
            </el-pagination>
        </template>
    </page-box>
</template>

<script lang="ts">
import { Component, Mixins } from "vue-property-decorator";
import { State } from 'vuex-class';
import TableMixin from "./table.mixin";
import { dialogForm } from "../components/job-manage/form";

@Component({
    name: "SystemManageJob"
})
export default class SystemManageJob extends Mixins(TableMixin) {
    @State(state => state.authArea) authArea: any;
    // 表格数据
    // tableData = [];
    // 批量操作数据集合
    batchList: any[] = [];
    canBatch: any = {
        // 是否可以批量删除
        remove: false
    };

    get tableColumn() {
        const res: any[] = [
            { label: '模板名称', prop: 'name', width: "300" },
            { label: '模板描述', prop: 'desc', width: "300" },
            { label: '创建时间', prop: 'createByTime' },
            { label: '创建人', prop: 'createByUser' },
            { label: '模板状态', prop: 'status' }
        ];
        return res;
    }

    activated() {
        this.initData(this.currentPage);
    }

    handleTagChange() {
        this.initData();
    }

    handleBatchClick(command: any) {
        if (command === "remove") {
            this.remove({}, "batch");
        }
    }

    // 表格选中修改
    onTableSelectionChange(selectList: any[]) {
        const removeList = selectList;
        this.canBatch.remove = removeList.length === selectList.length;
        this.batchList = selectList;
    }

    getConfirmInfo(item: any, type: string, handleModel = "single") {
        const confirmInfo: any = {
            msg: '',
            content: '',
            ids: []
        };
        if (type === 'remove') {
            confirmInfo.content = "是否确认删除职位?";
            confirmInfo.msg = "删除成功！";
        }
        let ids = [];
        if (handleModel === "batch") {
            confirmInfo.content = "共计" + this.batchList.length + "条数据，" + confirmInfo.content;
            ids = this.batchList.map(cur => cur.id);
        } else {
            ids = [item.id];
        }
        confirmInfo.ids = ids;
        return confirmInfo;
    }

    onPageSizeChange(pageSize: number) {
        this.pageSize = pageSize;
        this.initData();
    }

    onCurrentPageChange(page: number) {
        this.initData(page);
    }

    getInitParams() {
        return {
            url: "moduleManage/norm-list/list",
            data: {
                templateKind: this.$key2Name({
                    type: "",
                    list: [],
                    name: "status"
                }),
                status: "",
                name: undefined
            }
        };
    }

    buildTableData(list: any) {
        let res: any = [];
        if (list.length === 0) {
            return res;
        }
        res = list.map((cur: any) => {
            return {
                id: cur.id || "",
                name: cur.templateName || "",
                desc: cur.description || "",
                department: cur.departmentNamed || "",
                departmentValue: this.formatTextToArray(cur.departmentIds || ""),
                createByTime: cur.createTime || "",
                createByUser: cur.createUser || "",
                status: this.$getTaskModuleStatus(cur.status || 0),
                source: cur
            };
        });
        return res;
    }

    handleItem(item: any) {
        const type = item.id ? "update" : "add";
        dialogForm({
            value: "",
            sure: async(vm: any, model: any) => {
                vm.loader(true);
                // const ids = item.id ? [item.id] : [];
                const response = await this.$server["moduleManage/norm-list/delete"]({
                    params: {
                        id: type === "add" ? "" : item.id,
                        value: model.value
                    }
                });
                vm.loader(false);
                if (this.responseHasError(response)) {
                    return;
                }
                vm.close();
                this.$message({
                    message: type === "add" ? "职位已新增！" : "职位已更新！",
                    type: 'success',
                    duration: 1500
                });
                this.initData(this.currentPage);
            }
        });
    }

    remove(item: any, handleModel?: string) {
        this.triggerConfirm({
            item: item,
            type: "remove",
            handleModel: handleModel || "single",
            sure: async(confirmInfo: any) => {
                // const ids = item.id ? [item.id] : [];
                const response = await this.$server["moduleManage/norm-list/delete"]({
                    params: {
                        id: confirmInfo.ids[0]
                    }
                });
                if (this.responseHasError(response)) {
                    return;
                }
                this.$message({
                    message: confirmInfo.msg,
                    type: 'success',
                    duration: 1500
                });
                this.initData(this.currentPage);
            }
        });
    }

    query(item: any) {
        this.$router.push({
            name: "TownAdminModuleManageQuery",
            params: {
                type: ""
            },
            query: {
                id: item.id
            }
        });
    }

    edit(item: any) {
        this.$router.push({
            name: "TownAdminModuleManageForm",
            query: {
                id: item.id
            }
        });
    }
}
</script>
